<template>
    <div class='card-member' >
        <div class='card-inner'>
            <div class='personTotal clearfix'>
                <div class='lf personInfo'>
                    <h4 class="brief" v-if="!keyEmployee" :title="personInfo.dept_descr">{{personInfo.dept_descr}}</h4>
                    <h3 class='name ellipsis' :title="personInfo.name">{{personInfo.name}}</h3>
                    <ul class="width-nochange">
                        <li class="job" :title="personInfo.position_desc"><strong>职位:</strong>&nbsp;{{personInfo.position_desc  | handlePosition2}}</li> 
                        <li class="ellipsis" :title="personInfo.birthdate"><i class="fa fa-birthday-cake" aria-hidden="true"></i>出生日期 : {{personInfo.birthdate && personInfo.birthdate.split(' ')[0]}}<span v-if="personInfo.birthdate && personInfo.birthdate.trim()">({{personInfo.birthdate | calculateAge}}岁)</span></li> 
                        <li class="ellipsis" :title="personInfo.highest_edu"><i class="fa fa-graduation-cap" ></i>最高学历 : {{personInfo.highest_edu ? personInfo.highest_edu : '&nbsp;'}}</li>
                        <li class="ellipsis" :title="personInfo.political_sta_chn"><i class="iconfont" ></i>政治面貌 : {{personInfo.political_sta_chn}}</li>
                        <li class="ellipsis" v-if="keyEmployee" :title="personInfo.sta_lvl_descr"><i class="iconfont" ></i>职级:{{personInfo.sta_lvl_descr | handlePosition}}</li>
                    </ul>
                </div>
                <div class='lf personImg'>
                    <img :src="srcImg" class='cardPhoto' alt="">
                </div>
            </div>
            <div class="btnArea">          
                <a class="btn btn-leaderInfo" v-if="personInfo.personnel" target="_blank" @click='goResumeUrl'>
                    <i class="fa fa-file-pdf-o"></i> 履历表
                </a>
                <a class="btn btn-leaderSalary" v-if="personInfo.pay" @click="salaryDetail" data-modal="#modal1">
                    <i class="fa fa-jpy"></i> 薪酬信息
                </a>                            
            </div>
        </div>
        <el-dialog  :title="title" size="small"  :visible.sync="dialogTableVisible" :lock-scroll=false>
            <div class="salaryRecordCom">
                <h3>薪酬组成</h3>
                <el-table border :data="gridData">
                    <el-table-column property="descr" label="薪酬项" width="150"></el-table-column>
                    <el-table-column property="comprate" label="金额" width="200"></el-table-column>
                    <el-table-column property="currency_CD" label="货币"></el-table-column>
                    <el-table-column property="frequency_DESCR" label="发薪频率"></el-table-column>
                </el-table>
            </div>
            <div class="salaryRecord">
                <h3>近半年发薪记录</h3>
                <el-table border :data="gridData1" :fit='true'>
                    <el-table-column property="cal_PRD_ID" label="发薪期间" width="80"></el-table-column>
                    <el-table-column property="cal_ID" label="发薪类型" width="80"></el-table-column>
                    <el-table-column property="c_GROSS_AMT" label="收入合计	" width="80"></el-table-column>
                    <el-table-column property="c_DDCT_AMT" label="扣减合计" width="80"></el-table-column>
                    <el-table-column property="c_NET_PAY" label="实发工资"></el-table-column>
                    <el-table-column property="c_MPF" label="公司承担社保/MPF"></el-table-column>
                    <el-table-column property="c_LABORCOST" label="人工成本合计"></el-table-column>
                    <el-table-column property="currency_CD" label="货币代码"></el-table-column> 
                </el-table>
            </div>

        </el-dialog>
    </div>
</template>
<script>
import Vue from 'vue'
import { Table, TableColumn, Dialog } from 'element-ui'
import { _encode } from '@/common/js/handleCode'
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Dialog)
export default {
  data () {
    return {
      // wid:'33.333%'
      url: '#/resume',
      dialogTableVisible: false,
      gridData: [{}],
      gridData1: [],
    }
  },

  methods: {
    salaryDetail: function () {
      let self = this
      let para = {
        emplId: this.personInfo.emplid//获取当前点击名片的id
      }
      this.Axios.Post(this.URL.getSalaryByEmplid.url, para)
        .then(function (res) {
          self.gridData1 = res.data.datas

          self.payArray = []//近半年发薪记录
          for (let i = 0; i < res.data.datas.salarys.length; i++) {
            let str_id = res.data.datas.salarys[i].summary.cal_ID
            res.data.datas.salarys[i].summary.cal_ID = str_id.indexOf('PAY') > -1 ? ('正常发薪') : ('多次发薪')
            self.payArray.push(res.data.datas.salarys[i].summary)
            console.log(123, str_id)
          }
          self.gridData1 = self.payArray
          self.gridData = res.data.datas.salaryComprise//获取薪酬组成

        })
      this.dialogTableVisible = true
    },
    goResumeUrl () {

      let sex = this.personInfo.sex_descr === '女' ? 2 : 1
      const params = {
        emplid: this.personInfo.emplid,
        resumeType: 2,
        sex
      }

      window.open('/module/resume.html?' + _encode(JSON.stringify(params)))
    },
  },
  computed: {
    title: function () {

      return this.personInfo.name + '-薪酬信息'
    },
    ComputedEmplid: function () {
      return 'module/resume.html'
    },
    srcImg: function () {

      return this.Axios.baseURI + this.URL.getEmployeeImgNew.url + '?emplid=' + this.personInfo.emplid + '&sex=' + (this.personInfo.sex_descr === '女' ? 2 : 1) + '&token=' + localStorage.getItem('token')

    },
    keyEmployee: function () {
      return this.type === 'key' ? true : false
    }
  },
  props: {
    width: {
      type: String,
      default: '33.333%'
    },
    personInfo: {
      type: Object,
      default: ''
    },
    type: {
      type: String,
      default: 'dept'
    }
  },
  filters: {
    calculateAge: function (value) {

      if (value) { value = value.split(' ')[0] } else { return '' }

      return new Date().getFullYear() - new Date(value).getFullYear()
    },
    handlePosition: function (value) {
      if (!value || !value.trim()) {
        return ''
      }
      if (value && value.indexOf('_') < 0) {
        return value
      }
      return value.split('_')[1]
    },
    handlePosition2: function (value) {
      console.log(value.length, value)

      
      if (!value || !value.trim()) {
        return ''
      }

      if(value.length >=29) {
        return value.substr(0,27)+'...'
      }
      if (value && value.indexOf('_') < 0) {
        return value
      }
      return value.split('_')[1]
    }

  },
  watch: {
    widt: function () {
      // console.log('watch',this.widt);
      // console.log(this.red,'tell me color');
    }
  }
}
</script>
<style scoped>
.card-member {
  width: 33.333%;
  min-height: 1px;
  float: left;
  color: #333;
  background-color: #fff;
  padding-right: 10px;
  padding-left: 10px;
}
.card-inner {
  width: 100%;
  position: relative;
  margin: 10px auto;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

/*个人信息区域样式 start*/
.card-member .personTotal {
  /* cursor: pointer; */
  margin-bottom: 20px;
}
.card-member .personInfo {
  float: left;
  width: 69%;
  padding-left: 4%;
}
.iconfont {
  width: 20px;
  display: inline-block;
}
.card-member .name {
  font-size: 24px;
  margin-bottom: 10px;
  margin-top: 15px;
  font-weight: 500;
  line-height: 1.1;
}
.card-member .brief {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 300;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-member .width-nochange {
  /*max-width: 237px;*/
  min-width: 223px;
  font-size: 14px;
}
.card-member li.job {
  max-height: 40px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom:10px;
}
.card-member li {
  line-height: 20px;
  color: #333;
}
.card-member li .fa {
  width: 20px;
}
.card-member .personImg {
  float: left;
  width: 31%;
  padding: 20px 5px;
}
.card-member .cardPhoto {
  /*margin-left:5px;*/
  width: 120px;
  height: 167px;
  border-radius: 50%;
  max-width: 100%;
  vertical-align: middle;
}
/*个人信息区域样式 end*/

/*按钮区域样式 start*/
.card-member .btnArea {
  background: #f2f5f7;
  padding: 12px 0;
  border-top: 1px solid #e6e9ed;
  text-align: center;
  font-size: 12px;
  height: 44px;
}
.card-member .btn {
  border-radius: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid transparent;
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  display: inline-block;
}
.card-member .btnArea .btn-leaderInfo {
  color: #fff;
  background-color: #3c8dbc;
  border-color: #204d74;
}
.card-member .btnArea .btn-leaderInfo:hover {
  background-color: #367fa9;
  /*background-color: #00c0ef;*/
  cursor: pointer;
}
.card-member .btnArea .btn-leaderSalary {
  color: #fff;
  margin-left: 8px;
  background-color: #00c0ef;
  border-color: #00acd6;
}
.card-member .btnArea .btn-leaderSalary:hover {
  background-color: #00acd6;
  cursor: pointer;
}
/*按钮区域样式 end*/
</style>

<style>
.card-member .el-dialog--small {
  width: 63%;
}
.card-member .el-dialog {
  position: relative;
  left: 0;
  transform: translateX(30%);
  -ms-transform: translateX(30%);
}
.card-member .el-dialog__header {
  width: 98%;
}
.card-member .el-table .gutter {
  display: none;
}
.card-member .salaryRecord {
  margin-top: 20px;
}
.card-member .salaryRecord>h3{
  margin-bottom:5px;
}
.card-member  .salaryRecordCom>h3{
  margin-bottom:5px;
}
.card-member .el-dialog__body {
  cursor: pointer;
}
.card-member .el-table td, .card-member .el-table th.is-leaf{
    border: 1px solid #dfe6ec;
    border-collapse:collapse;
}
.card-member .el-table__empty-block{
  border-left:1px solid #dfe6ec;
}

</style>
